<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>首页</title>
</head>
<style>
    * {
        margin: 0;
        padding: 0;
    }

    h1 {
        text-align: center;
        margin-top: 10px;
    }

    .container {
        margin: auto;
        width: 800px;

    }

    .search {
        position: relative;
        margin-top: 20px;
    }

    .inputs {
        width: 300px;
        height: 40px;
        border-radius: 18px;
        outline: none;
        border: 1px solid #ccc;
        padding-left: 20px;
        position: absolute;
        top: 70px;
    }

    .table {
        position: relative;
    }

    table {
        border-collapse: collapse;
        /*边框不重叠*/
        position: absolute;
        top: 60px;
    }

    table tr td {
        border: solid 1px #ccc;
        text-align: center;
        height: 50px;
    }

    table tr th {
        border: solid 1px #ccc;
        height: 50px;
        width: 200px;
    }

    button {
        width: 50px;
        height: 30px;
    }

    .btn {
        height: 40px;
        margin-left: 20px;
        padding: 10px;
        position: relative;
        left: 310px;
        top: 20px;
    }
</style>

<body>
    <div class="container">
        <h1>朴朴商品</h1>
        <div class="searcht">
            <input type="text" id="ins" class="inputs" placeholder="搜索" value="">
            <input type="button" class="btn" value="查询水果" onclick="gett()">
            <input type="button" class="btn" value="单品水果" onclick="dp()">
            <input type="button" class="btn" value="打折水果" onclick="dz()">
            <input type="button" class="btn" value="推荐水果" onclick="tj()">
            <input type="button" class="btn" value="刷&nbsp新" onclick="sx()">
        </div>
        <div class="table">
            <table border="0" cellspacing='0' cellpadding='0'>
                <tr>
                    <th>编号</th>
                    <th>水果</th>
                    <th>规格</th>
                    <th>介绍</th>
                    <th>市场价</th>
                    <th>折扣</th>
                    <th>现价</th>
                    <th>抓取时间</th>
                    <th>操作</th>
                </tr>

            </table>
        </div>
    </div>
</body>
<script src="https://cdn.bootcdn.net/ajax/libs/axios/0.21.1/axios.min.js"></script>
<script src="../js/axios.js"></script>
<script>

    let type = "Single"
    
    futureAxios({
        url: '/product/data/Single',
        method: 'get',
        success: (result) => {
            let inerhtml = `
            <table border="0" cellspacing='0' cellpadding='0'>
                <tr>
                    <th>编号</th>
                    <th>水果</th>
                    <th>规格</th>
                    <th>介&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp绍</th>
                    <th>市场价</th>
                    <th>折扣</th>
                    <th>现价</th>
                    <th>抓取时间</th>
                    <th>操作</th>
                </tr>
            `
            // console.log(result)
            for (let i = 0, l = result.count; i < l; i++) {
                // console.log(result.products[i].name)
                inerhtml += `
                <tr>
                    <td>${i}</td>
                    <td>${result.products[i].name}</td>
                    <td>${result.products[i].spec}</td>
                    <td>${result.products[i].subTitle}</td>
                    <td>${result.products[i].marketPrice/100}</td>
                    <td>${result.products[i].discountRate}</td>
                    <td>${result.products[i].price/100}</td>
                    <td>${result.products[i].joinDateTime}</td>
                    <td>
                        <button onclick="del('${result.products[i].productId}')">删除</button>
                    </td>
                </tr>
                `

            }
            inerhtml += `
                </table>
            `
            $(".table").innerHTML = inerhtml
        },

    })
    //单品渲染
    function dp(){
        console.log(1)
        type = "Single"
        futureAxios({
            url: '/product/data/Single',
            method: 'get',
            success: (result) => {
                let inerhtml = `
            <table border="0" cellspacing='0' cellpadding='0'>
                <tr>
                    <th>编号</th>
                    <th>水果</th>
                    <th>规格</th>
                    <th>介&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp绍</th>
                    <th>市场价</th>
                    <th>折扣</th>
                    <th>现价</th>
                    <th>抓取时间</th>
                    <th>操作</th>
                </tr>
            `
                // console.log(result)
                for (let i = 0, l = result.count; i < l; i++) {
                    console.log(result.products[i].name)
                    inerhtml += `
                <tr>
                    <td>${i}</td>
                    <td>${result.products[i].name}</td>
                    <td>${result.products[i].spec}</td>
                    <td>${result.products[i].subTitle}</td>
                    <td>${result.products[i].marketPrice/100}</td>
                    <td>${result.products[i].discountRate}</td>
                    <td>${result.products[i].price/100}</td>
                    <td>${result.products[i].joinDateTime}</td>
                    <td>
                        <button onclick="del('${result.products[i].productId}')">删除</button>
                    </td>
                </tr>
                `

                }
                inerhtml += `
                </table>
            `
                $(".table").innerHTML = inerhtml
            },

        })

    }
    //打折渲染
    function dz(){
        console.log(1)
        type = "Discount"
        futureAxios({
            url: '/product/data/Discount',
            method: 'get',
            success: (result) => {
                let inerhtml = `
            <table border="0" cellspacing='0' cellpadding='0'>
                <tr>
                    <th>编号</th>
                    <th>水果</th>
                    <th>规格</th>
                    <th>介&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp绍</th>
                    <th>市场价</th>
                    <th>折扣</th>
                    <th>现价</th>
                    <th>抓取时间</th>
                    <th>操作</th>
                </tr>
            `
                // console.log(result)
                for (let i = 0, l = result.count; i < l; i++) {
                    console.log(result.products[i].name)
                    inerhtml += `
                <tr>
                    <td>${i}</td>
                    <td>${result.products[i].name}</td>
                    <td>${result.products[i].spec}</td>
                    <td>${result.products[i].subTitle}</td>
                    <td>${result.products[i].marketPrice/100}</td>
                    <td>${result.products[i].discountRate}</td>
                    <td>${result.products[i].price/100}</td>
                    <td>${result.products[i].joinDateTime}</td>
                    <td>
                        <button onclick="del('${result.products[i].productId}')">删除</button>
                    </td>
                </tr>
                `

                }
                inerhtml += `
                </table>
            `
                $(".table").innerHTML = inerhtml
            },

        })

    }
    //推荐渲染
    function tj(){
        console.log(1)
        type = "Recommend"
        futureAxios({
            url: '/product/data/recommend',
            method: 'get',
            success: (result) => {
                let inerhtml = `
            <table border="0" cellspacing='0' cellpadding='0'>
                <tr>
                    <th>编号</th>
                    <th>水果</th>
                    <th>规格</th>
                    <th>介&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp绍</th>
                    <th>市场价</th>
                    <th>折扣</th>
                    <th>现价</th>
                    <th>抓取时间</th>
                    <th>操作</th>
                </tr>
            `
                // console.log(result)
                for (let i = 0, l = result.count; i < l; i++) {
                    console.log(result.products[i].name)
                    inerhtml += `
                <tr>
                    <td>${i}</td>
                    <td>${result.products[i].name}</td>
                    <td>${result.products[i].spec}</td>
                    <td>${result.products[i].subTitle}</td>
                    <td>${result.products[i].marketPrice/100}</td>
                    <td>${result.products[i].discountRate}</td>
                    <td>${result.products[i].price/100}</td>
                    <td>${result.products[i].joinDateTime}</td>
                    <td>
                        <button onclick="del('${result.products[i].productId}')">删除</button>
                    </td>
                </tr>
                `

                }
                inerhtml += `
                </table>
            `
                $(".table").innerHTML = inerhtml
            },

        })

    }
    //模糊查询
    function gett(){
        let gett = $("#ins").value
        console.log(gett)
        futureAxios({
        url: '/product/data/'+type+'/pname='+gett,
        method: 'get',
        
        success: (result) => {
            let inerhtml = `
            <table border="0" cellspacing='0' cellpadding='0'>
                <tr>
                    <th>编号</th>
                    <th>水果</th>
                    <th>规格</th>
                    <th>介&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp绍</th>
                    <th>市场价</th>
                    <th>折扣</th>
                    <th>现价</th>
                    <th>抓取时间</th>
                    <th>操作</th>
                </tr>
            `
            // console.log(result)
            for (let i = 0, l = result.count; i < l; i++) {
                // console.log(result.products[i].name)
                inerhtml += `
                <tr>
                    <td>${i}</td>
                    <td>${result.products[i].name}</td>
                    <td>${result.products[i].spec}</td>
                    <td>${result.products[i].subTitle}</td>
                    <td>${result.products[i].marketPrice/100}</td>
                    <td>${result.products[i].discountRate}</td>
                    <td>${result.products[i].price/100}</td>
                    <td>${result.products[i].joinDateTime}</td>
                    <td>
                        <button onclick="del('${result.products[i].productId}')">删除</button>
                    </td>
                </tr>
                `

            }
            inerhtml += `
                </table>
            `
            $(".table").innerHTML = inerhtml
        },

    })
    }
    //刷新
    function sx(){
        futureAxios({
        url: '/product/data/refresh='+type,
        method: 'get',
        
        success: (result) => {

            console.log(1)
            if(type=="Single"){
                dp()
            }else if(type=="Discount"){
                dz()
            }else{
                tj()
            }
        },

    })
    }
    //删除
    function del(res){
        console.log(1)
        console.log(res)

        futureAxios({
        url: '/product/data/'+type+'/deleteId='+res,
        method: 'get',
        success: (result) => {
            console.log(123)
            if(type=="Single"){
                dp()
            }else if(type=="Discount"){
                dz()
            }else{
                tj()
            }
        },

    })
    }
</script>

</html>